import React, { useState, useEffect } from 'react'
import style from './ChangePassword.module.css'
import axios from 'axios'
import Tip from "../Tip"
export default function ChangePassword() {
    let [tipFlag, changeTipFlag] = useState(false)
    let [tipMsg, changeTipMsg] = useState('')
    useEffect(() => {
        let timer = setTimeout(() => {
            changeTipFlag(false)
        }, 1500);
        return () => { clearTimeout(timer) }
    }, [tipFlag])
    let [newPassword, changeNewPassword] = useState('')
    let [newPasswordFlag, changeNewPasswordFlag] = useState(true)
    let [newConfirmPasswordFlag, changeNewConfirmPasswordFlag] = useState(true)
    let passwordInput = (e) => {
        changeNewPassword(e.target.value)
        // 1.密码必须由字母、数字组成，区分大小写
        // 2.密码长度为8-18位
        let reg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/
        if (reg.test(e.target.value)) {
            changeNewPasswordFlag(true)
        } else {
            changeNewPasswordFlag(false)
        }
    }
    let confirmPasswordInput = (e) => {
        if (e.target.value != newPassword) {
            changeNewConfirmPasswordFlag(false)
        } else {
            changeNewConfirmPasswordFlag(true)
        }
    }
    let submit = async () => {
        if (newPassword == '') {
            changeTipFlag(true)
            changeTipMsg('未输入新密码')
        } else if (!newPasswordFlag) {
            changeTipFlag(true)
            changeTipMsg('请检查密码格式')
        } else if (!newConfirmPasswordFlag) {
            changeTipFlag(true)
            changeTipMsg('两次输入密码不一致')
        } else {
            let res = await axios.post('/changePassword', { 'password': newPassword })
            if (res.data.code == 203) {
                changeTipFlag(true)
                changeTipMsg('修改成功')
            } else {
                changeTipFlag(true)
                changeTipMsg('出错了，请稍后重试')
            }
        }
    }
    return (
        <div>
            <div className={style.bigBox}>
                <div className={style.leftBox}>
                    <div className={style.fieldset}>
                        <div>
                            <label htmlFor="password">新密码</label>
                            {
                                newPasswordFlag ? <input className={style.input} onInput={passwordInput} type="password" id='password' />
                                    : <input className={style.inputError} onInput={passwordInput} type="password" id='password' />
                            }
                            {
                                newPasswordFlag ? '' : <span className={style.errorTip}>密码必须由字母、数字组成，长度为8-18位</span>
                            }
                        </div>
                        <div>
                            <label htmlFor="confirmPassword">确认密码</label>
                            {
                                newConfirmPasswordFlag ? <input className={style.input} onInput={confirmPasswordInput} type="password" id='confirmPassword' />
                                    : <input className={style.inputError} onInput={confirmPasswordInput} type="password" id='confirmPassword' />
                            }
                            {
                                newConfirmPasswordFlag ? '' : <span className={style.errorTip}>两次输入的密码不一致</span>
                            }
                        </div>
                        <div className={style.submit} onClick={submit}>
                            <button>更改密码</button>
                        </div>
                    </div>
                </div>
                <div className={style.rightBox}>
                    <div className={style.notice}>
                        <h2 className={style.tip}>更改密码</h2>
                        <p>输入 酷匠网 的新密码。强烈建议您设置一个未在其他网站中使用的专用密码。</p>
                        <p>请注意：如果您更改了密码，就无法再使用原来的密码！</p>
                    </div>
                </div>
            </div>
            {
                tipFlag ? <Tip msg={tipMsg}></Tip> : ''
            }
        </div>
    )
}
